<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
        name="viewport">
  <meta content="ie=edge" http-equiv="X-UA-Compatible">
  <title>签名手写板</title>
  <style>
      #canvas {
          border: 1px solid #000;
      }

      body {
          display: flex;
      }
  </style>
</head>
<body>
<!--canvas-->
<div class="panel">
  <canvas height="600" id="canvas" width="800"></canvas>
  <hr>
  <button id="boldBtn" type="button">粗线条</button>
  <button id="thinBtn" type="button">细线条</button>
  <button id="saveBtn" type="button">保存签名</button>
  <input id="color" name="" type="color" value=""/>
  <button id="clearBtn" type="button">橡皮擦</button>
  <button id="nullBtn">清除</button>
</div>
<div class="saveImg"></div>


</body>
<script type="text/javascript">
  let dom = {
    canvas: document.getElementById('canvas'),
    boldBtn: document.getElementById('boldBtn'),
    thinBtn: document.getElementById('thinBtn'),
    saveBtn: document.getElementById('saveBtn'),
    color: document.getElementById('color'),
    clearBtn: document.getElementById('clearBtn'),
    nullBtn: document.getElementById('nullBtn')
  }
  let ctx = dom.canvas.getContext('2d');
  // 让线条更圆滑
  ctx.lineJoin = 'round';
  // 开始和结束也是圆润的
  ctx.lineCap = 'round';

  let isMouseDown = false;
  let lastPoint = {
    x: undefined,
    y: undefined
  };
  let lineWidth = 5;
  let color = '#000';

  // 1.绘制线条
  function drawLine(x1, y1, x2, y2) {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineWidth = lineWidth;
    ctx.lineTo(x2, y2);
    ctx.strokeStyle = color;
    ctx.stroke();
    ctx.closePath();
  }

  // 2.绑定事件
  dom.canvas.onmousedown = function (e) {
    isMouseDown = true;
    ctx.beginPath()
    let x = e.pageX - dom.canvas.offsetLeft;
    let y = e.pageY - dom.canvas.offsetTop;
    ctx.moveTo(x, y);
  };
  dom.canvas.onmousemove = function (e) {
    if (isMouseDown) {
      let x = e.pageX - dom.canvas.offsetLeft;
      let y = e.pageY - dom.canvas.offsetTop;
      ctx.lineTo(x, y);
      ctx.stroke();
    }
  };
  dom.canvas.onmouseup = function (e) {
    isMouseDown = false;
    ctx.closePath()
  };

  // 3.粗线条
  dom.boldBtn.onclick = function () {
    ctx.globalCompositeOperation = 'source-over';
    ctx.lineWidth = 20;
  };

  // 4.细线条
  dom.thinBtn.onclick = function () {
    ctx.globalCompositeOperation = 'source-over';
    ctx.lineWidth = 5;
  };

  // 5.保存签名
  dom.saveBtn.onclick = function () {
    let url = dom.canvas.toDataURL('image/png');
    let img = new Image()
    img.src = url;
    img.width = 200;
    img.height = 200;
    let saveImg = document.querySelector('.saveImg');
    saveImg.appendChild(img);

    //  创建a标签设置下载属性
    let download = document.createElement('a');
    download.setAttribute('download', '签名.png');
    download.href = url;
    download.click()
  }

  // 6.颜色
  dom.color.onchange = function () {
    color = dom.color.value;
  };

  // 7.橡皮擦
  dom.clearBtn.onclick = function () {
    // color = '#fff';
    ctx.globalCompositeOperation = 'destination-out';
    ctx.lineWidth = 30
  };

  // 8.清除
  dom.nullBtn.onclick = function () {
    ctx.clearRect(0, 0, dom.canvas.width, dom.canvas.height);
  };


</script>
</html>